<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c"%>
<?xml version="1.0" encoding="ISO-8859-5"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-5"/>
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/palette.css" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/wcme-common.js"></script>
<script type="text/javascript" src="js/wcme-contextMenu.js"></script>
<script type="text/javascript" src="js/wcme-colorGrid.js"></script>
<script type="text/javascript" src="js/wcme-palette.js"></script>
<script type="text/javascript" src="js/wcme-range.js"></script>
<script type="text/javascript" src="js/wcme-frame.js"></script>
<script type="text/javascript" src="js/wcme-selection.js"></script>
<script type="text/javascript"></script>
</head>
<title>Test Web CME</title>
<body id="mbody">

<h4 style="color:red;">WEB Content Management Elements (WCME)</h4>
<div style="width: 800px;font-family:serif;font-size:12px;font-weight:bold; text-align: justify;">
<p>You can see below two WCME. There are a samples you can play with its.</p>
<p>WCME is a area on browser page (actually iframe element) you can edit, set some text attributes,
such as color, background, font and text style. After you complete text changes you can save
content of WCME on the server where the web application is hosting.</p>
<p>When you return to the web page
after time the page will display saved new content of WCME. So you do not need to enter host where
your application resides but you can edit of text content of your web pages directly from browser (on the fly)
and see any changes immediately.</p>
<p>
If you right click on WCME then context menu is opened:</p>
<ul style="list-style: decimal;">
<li>
 'Edit' - go to editing mode of WCME.
</li>
<li>
 'HTML/Rich Text' - switch between HTML view and usual browser view. HTML view shows you html code of the WCME.
Rich text returns you back to usual browser view.
</li>
<li>
 'Cancel' - close the context menu.
</li>
</ul>
</div>
<div id="editarea1" class="editarea"></div>
<div style="width: 800px;font-family:monospace;font-size:12px;font-weight:normal; text-align: justify;">
<div style="width: 400px; float: left;">
<p>When you come to edit mode palette element is opened on top of WCME. Now you can select 
a piece of text inside of WCME and assign a some attributes for this selection. Selection is keeping while 
you do not click on WCME so you can apply a few attributes for one time selected text.</p>  
There is a rigth click context menu under the mode:
<ul style="list-style: decimal;">
<li>
 'Save' - save content of WCME on server site persistently.
</li>
<li>
 'Quit' - leave edit mode but keep the all changes you made.
</li>
<li>
 'HTML/Rich Text' - switch between HTML view and usual browser view. You can edit html code and
 all changes will be kept by WCME. Note: palette is disappeared when WCME is in HTML mode. 
</li>
<li>
 'Cancel' - cancel all changes and leave edit mode.
</li>
</ul>
</div> 
<div id="editarea2" class="editarea" style="float: left; margin:15px;"></div>
</div>
<script type="text/javascript">
  var cme1,cme2;
  initPage( function()
    { 
      cme1 = new CMEFrame( 'editarea1', 'iframe1' ); 
      cme2 = new CMEFrame( 'editarea2', 'iframe2' );
      cme1.load(); cme2.load(); //alert('after all');
    });   
</script>
</body>
</html>
